<template>
  <div>
    <div id="music-player"></div>
  </div>
  <!-- 遮罩 -->
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

import wangyiCloudApi from 'src/api/music/163';
@Component({
  async mounted() {
    wangyiCloudApi.get().then(async (res: any) => {
      const list = await res.json();
      //  mini: false,
      const options = {
        container: document.getElementById('music-player'),

        autoplay: true,
        audio: list,
        fixed: true,
        lrcType: 3,
        mutex: true,
        theme: '#FADFA3',
        loop: 'all',
        order: 'random',
        preload: 'auto',
        volume: 0.7,
        listFolded: true,
        listMaxHeight: 90
      };
      this.$aPlayer.init(options);
    });
  }
})
export default class MusicPlayer extends Vue {
  // get className() {
  //   return this.$q.screen.lt.sm ? 'mini' : '';
  // }
}
</script>

<style lang="scss">
@media screen and (min-width: 800px) {
  #music-player.aplayer.aplayer-fixed {
    top: 300px;
    right: 5px;
    left: unset;
    bottom: unset;
    .aplayer-body {
      width: 400px;
      top: 300px;
      right: 0;
      bottom: unset;
      left: unset;
      padding-right: 0;
      padding-left: 18px;
      .aplayer-pic {
        float: right;
      }
      .aplayer-info {
        float: left;
        will-change: width, transform;
        // transform: none;
        margin-left: 0;
        width: 80%;
        opacity: 1;
        .aplayer-music,
        .aplayer-controller {
        }
      }
    }

    .aplayer-list {
      transform: translateY(70px);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    }
    .aplayer-lrc {
      display: none;
    }
    .aplayer-miniswitcher {
      left: 0;
      right: unset;
      .aplayer-icon {
        transform: rotate(0);
      }
    }
    &.aplayer-narrow {
      .aplayer-body {
        .aplayer-info {
          width: 0;
          opacity: 0;
          .aplayer-music,
          .aplayer-controller {
            // display: none;
          }
        }
      }
      .aplayer-miniswitcher {
        .aplayer-icon {
          transform: rotate(-180deg);
        }
      }
    }
    // &.mini {
    //   .aplayer-info {
    //     width: 0;
    //     // .aplayer-music {
    //     //   transform: scale(0);
    //     // }
    //     // .aplayer-controller {
    //     //   transform: scale(0);
    //     // }
    //   }
    // }
  }
}
#music-player.aplayer.aplayer-fixed {
  max-height: 300px;
  overflow: auto;
  .aplayer-lrc-contents {
    display: none;
  }
}
</style>
